<script lang="ts" setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import DefineComponent from "../utils/App";
import { ElMessage, ElMessageBox } from 'element-plus'
import { OrderListService, OrderAddService, OrderDelService, OrderUpdService, PayOrderService, OrderCancelService } from "@/api/order";
// 获取用户的id
import { useUserInfoStore } from '@/store/user.js'
const userInfoStore = useUserInfoStore();

DefineComponent();

const orderinfo = ref([{

    id: 1,
    price: 32.0,
    totalPrice: 32.0,
    username: "zhangqi",
    createTime: "2024-05-15 22:52:23",
    status: 0,
    gname: "紫皮茄子",
    gimage: "https://web-tlias800.oss-cn-beijing.aliyuncs.com/48cf88d8-3e4c-4ae8-b069-c396ddf9fdf1.jpg",
    onumber: 1,
    number: 32,
    sid: 1,
    gid: 1,
    statustype: '未支付'
}])

//  订单的数据模型
const orderModel = ref({
    id: '',
    price: '',
    totalPrice: '',
    username: '',
    createTime: '',
    status: '',
    gname: '',
    gimage: '',
    onumber: '',
    number: '',
})

// 添加订单的数据模型
const addModel = ref({
    gId: '',
    number: '',
    totalPrice: '',
    // bId: userInfoStore.info.id,
    sId: ''
})

// 修改弹窗
const dialogUpdVisible = ref(false)

// // 添加弹窗
// const dialogInsVisible = ref(false)

// 查询订单
const OrderList = async () => {
    //   console.log('用户id:' + userInfoStore.info.id)
    let result = await OrderListService(userInfoStore.info.id);

    console.log("返回结果:" + result)
    console.log(result)
    //渲染列表数据
    orderinfo.value = result.data

    //  修改属性名字   管理员页面需要
    //为列表中添加状态属性
    for (let i = 0; i < orderinfo.value.length; i++) {
        let info = orderinfo.value[i];
        for (let j = 0; j < orderinfo.value.length; j++) {
            if (info.status === 0) {
                info.statustype = '未支付'
            } else if (info.status === 1) {
                info.statustype = '已完成'
            } else if (info.status === 2) {
                info.statustype = '已取消'
            }
        }
    }
}

OrderList()

// 展示修改订单的弹窗
const showDialog = (row) => {
    dialogUpdVisible.value = true
    orderModel.value.id = row.id,
        orderModel.value.number = row.onumber,
        orderModel.value.totalPrice = row.totalPrice
    orderModel.value.status = row.status

}

//  添加订单
const addorder = async () => {

    let result = await OrderAddService(addModel.value)

    // 成功
    if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '添加成功')

    } else {
        ElMessage.error('添加失败')
    }

    OrderList()
}

const clearData = () => {

}

// 删除订单
const OrderDel = async (row) => {

    // console.log('订单编号:')
    // console.log(row.id)
    let result = await OrderDelService(row.id)

    // 成功
    if (result.code === 1) {
        ElMessage.success(result.msg ? result.msg : '删除成功')

    } else {
        ElMessage.error('删除失败')
    }

    OrderList()
}

// 修改订单
const updateOrder = async () => {

    if (orderModel.value.status == '0') {
        // 商品未支付
        let result = await OrderUpdService(orderModel.value)

        // 成功
        if (result.code === 1) {
            ElMessage.success(result.msg ? result.msg : '修改成功')

        } else {
            ElMessage.error('修改失败')
        }
        dialogUpdVisible.value = false
    }
    if (orderModel.value.status == '1') {
        // 商品已完成，则不可以取消订单
        ElMessage.error('商品订单已完成！')

    } else if (orderModel.value.status == '2') {
        // 商品已取消
        ElMessage.error('商品订单已取消！')
    }

    OrderList()


}
// 订单结算
const pay = async (row) => {

    if (row.status == 0) {
        // 商品未支付，
        let params = {
            id: row.id,
            number: row.onumber,
            totalPrice: row.onumber * row.price,
            gId: row.gid,
            bId: userInfoStore.info.id,
            sId: row.sid
        }

        let result = await PayOrderService(params)
        // 成功
        if (result.code === 1) {
            ElMessage.success(result.msg ? result.msg : '修改成功')

        } else {
            ElMessage.error('修改失败')
        }
    }
    if (row.status == 1) {
        // 商品已完成，则不可以取消订单
        ElMessage.error('商品订单已完成！')
    } else if (row.status == 2) {
        // 商品已取消
        ElMessage.error('商品订单已取消！')
    }
    OrderList()
}

//  取消订单
const ordercancel = async (row) => {

    if (row.status == 0) {
        // 商品未支付，

        let result = await OrderCancelService(row.id)
        // 成功
        if (result.code === 1) {
            ElMessage.success(result.msg ? result.msg : '取消成功')
        } else {
            ElMessage.error('取消失败')
        }
    } else if (row.status == 1) {
        // 商品已完成，则不可以取消订单
        ElMessage.error('商品订单已完成！')
    } else if (row.status == 2) {
        // 商品已取消
        ElMessage.error('商品订单已取消！')
    }

    OrderList()
}
</script>


<template>
    <el-card class="">
        <div class="card-header">
            <span>订单管理</span>

            <!-- <el-button type="primary" @click="dialogInsVisible = true">添加订单</el-button> -->
        </div>
        <div style="margin-top: 20px;">
            <hr>
        </div>

        <el-table :data="orderinfo" style="width: 100%">
            <el-table-column type="expand">
                <template #default="props">
                    <div m="4">
                        <p m="t-0 b-2">订单编号: {{ props.row.id }}</p>
                        <p m="t-0 b-2">商品总价: {{ props.row.totalPrice }}</p>
                        <p m="t-0 b-2">订单创建时间: {{ props.row.createTime }}</p>

                    </div>
                </template>
            </el-table-column>

            <el-table-column label="商品名称" prop="gname" />
            <el-table-column label="图像" prop="gimage">
                <template #default="{ row }">
                    <img :src=row.gimage alt="图片走丢了" style="height: 100px" />
                </template>
            </el-table-column>
            <el-table-column label="商品购买数量" prop="onumber" />
            <el-table-column label="单价" prop="price" />
            <el-table-column label="卖家" prop="sid" />
            <el-table-column label="状态" prop="statustype" />
            <el-table-column label="操作" width="250">
                <template #default="{ row }">
                    <!-- 修改 -->
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                    <!-- 订单结算 -->
                    <el-button type="primary" round @click="pay(row)">结算</el-button>
                    <!-- 删除订单 -->
                    <el-button :icon="Delete" circle plain type="danger" @click="OrderDel(row)"></el-button>
                    <!-- 订单取消  -->
                    <el-button type="danger" round @click="ordercancel(row)">取消订单</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改商品 -->
        <el-dialog v-model="dialogUpdVisible" title='修改订单' width="30%">
            <el-form :model="orderModel" label-width="100px" style="padding-right: 30px">
                <el-form-item label="订单编号" prop="id">
                    <el-input v-model="orderModel.id" minlength="1" maxlength="10" disabled></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="number">
                    <el-input v-model="orderModel.number" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="商品总价" prop="totalPrice">
                    <el-input v-model="orderModel.totalPrice" minlength="1" maxlength="15"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogUpdVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateOrder"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 添加商品 -->
        <!-- <el-dialog v-model="dialogInsVisible" title='添加订单' width="30%">
            <el-form :model="addModel" label-width="100px" style="padding-right: 30px">
                <el-form-item label="商品编号" prop="gId">
                    <el-input v-model="addModel.gId" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="商品购买数量" prop="number">
                    <el-input v-model="addModel.number" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="商品总价" prop="totalPrice">
                    <el-input v-model="addModel.totalPrice" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <!-- <el-form-item label="买家id" prop="bId">
                    <el-input v-model="addModel.bId" minlength="1" maxlength="15"></el-input>
                </el-form-item> 
                <el-form-item label="卖家id" prop="sId">
                    <el-input v-model="addModel.sId" minlength="1" maxlength="15"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogInsVisible = false">取消</el-button>
                    <el-button type="primary" @click="addorder()"> 确认 </el-button>
                </span>
            </template>
        </el-dialog> -->

    </el-card>

</template>

<style scoped>
.el-p {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.el-input {
    width: 220px;
}

.el-select {
    width: 220px;
}


.card-header {
    display: flex;
    justify-content: space-between;
}
</style>